<template>
  <el-container>
    <!-- 左侧内容区域 -->
    <el-aside :width="width + 'px'" style="background-color: rgb(238, 241, 246)">
      <!-- logo图标 -->
      <div class="logo" @click="shrink">
        <img src="http://img.1314000.cn/logo.png" alt="" />
      </div>
      <!-- 菜单 -->
      <el-menu
        :default-openeds="defaultOpeneds"
        :collapse-transition="false"
        default-active="/admin/dashoard"
        :router="true"
        :collapse="isCollapse"
      >
        <template v-for="item in menuData">
          <template v-if="!item.children">
            <!-- 一级菜单 -->
            <el-menu-item :index="item.path" :key="item.path">
              <i class="el-icon-setting"></i>
              <span slot="title">{{ !isCollapse ? item.name : '' }}</span>
            </el-menu-item>
          </template>
          <template v-else>
            <!-- 二级菜单 -->
            <el-submenu :index="item.path" :key="item.path">
              <template slot="title">
                <i class="el-icon-message"></i>
                {{ !isCollapse ? item.name : '' }}
              </template>
              <template v-for="val in item.children">
                <el-menu-item :index="val.path" :key="val.path">{{ val.name }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
        </template>
      </el-menu>
    </el-aside>

    <!-- 右侧内容区域 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown @command="clickDropdownItem">
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">用户退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main class="mainbox">
        <!-- 右侧内容区域 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { getMenuApi } from '@/api/commonApi'
export default {
  data() {
    return {
      menuData: [],
      width: 200,
      isCollapse: false
    }
  },
  computed: {
    defaultOpeneds() {
      let openeds = []
      if (this.menuData.length > 0) {
        this.menuData.some(item => {
          if (item.children) {
            openeds.push(item.path)
          }
          return item.children
        })
      }
      return openeds
    }
  },
  created() {
    this.getMenu()
  },
  methods: {
    shrink() {
      // true收起来，false展开
      this.isCollapse = !this.isCollapse
      this.width = this.width == 60 ? 200 : 60
    },
    async getMenu() {
      let ret = await getMenuApi()
      this.menuData = ret.data
    },
    clickDropdownItem(itemFlag) {
      console.log(this.$confirm)
      // 用户退出
      if ('logout' === itemFlag) {
        this.$confirm('您真的要退出本次登录吗？', '退出登录')
          .then(_ => {
            this.$store.commit('user/userLogout')
          })
          .catch(_ => {})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.logo {
  background: #b3c0d1;
  line-height: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-container {
  height: 100%;
}
.mainbox {
  height: 100%;
  background-color: rgb(255, 255, 255);
}
.el-aside {
  color: #333;
}
</style>
